var pEle = document.querySelectorAll('.menu>p')
for (let i = 0; i < pEle.length; i++) {
    pEle[i].onclick = function () {
        for (let j = 0; j < pEle.length; j++) {
            pEle[j].classList.remove('active')
        }
        this.className='active'
    }
}
var bar = document.querySelector('.bar')
var B = echarts.init(bar)
var line = document.querySelector('.line')
var l = echarts.init(line)



B.setOption({

    title: { //图表的标题
        text: '每月收入',
        left: 'left',
    },
    legend: { //图例
        top: 10,
        right: 130
    },
    xAxis: {// X轴设置
        data: ['01','02','03','04','05','06','07','08','09','10','11','12']
    },
    yAxis: [{ // 纵轴标尺固定
        type: 'value',
        scale: true,
        max: 5000,
        min: 0,
        splitNumber: 7,

    }],

    series: [
        {
            name: '当前每月收入',
            barWidth: 15,
            // showBackground:true,
            backgroundStyle: {
                // color: 'skyblue',
                borderRadius: 20, //背景圆角
            },
            type: 'bar',
            data: [2550,1600,1700,3300,4800,3500,1700,2500,2300,1700,3800,1700]
        },
        {
            name: '同期每月收入',
            barWidth: 15,
            // showBackground:true,
            backgroundStyle: {
                //color: '',
                borderRadius: 20, //背景圆角
            },
            type: 'bar',
            data: [1600,250,300,1700,1700,800,300,500,2600,2700,3800,1700]
        }
    ]
})


l.setOption({
    title: { //图表的标题
        text: '每年收入走势',
        left: 'left',
    },
    legend: { //图例
        top: 10,
        right: 120,
    },
    xAxis: { //x轴设置
        data: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th']
    },
    yAxis: [{ // 纵轴标尺固定
        type: 'value',
        scale: true,
        max: 200,
        min: 0,
        splitNumber: 20,

    }],
    series: [
        {
            name: '每年收入走势',
            type: 'line',
            data: [100, 120, 170, 162, 180, 175, 160],
            symbolSize: 5, //圆点大小
            symbol: 'circle',//圆点形状
            smooth: true, //是否平滑曲线显示
            itemStyle: {
                normal: {
                    color: 'green', //折线颜色
                    borderWidth: 2, //圆点的边框宽度
                    borderColor: 'green', //圆点的边框颜色
                    lineStyle: { width: 2 }, //折线的宽度
                    shadowBlur: 1,
                    shadowColor: 'green'
                }
            }
        },
        {
            name: '每年同期收入走势',
            type: 'line',
            data: [60, 80, 70, 65, 80, 76, 100],
            symbolSize: 5, //圆点大小
            symbol: 'circle',//圆点形状
            smooth: true, //是否平滑曲线显示
            itemStyle: {
                normal: {
                    color: 'skyblue', //折线颜色
                    borderWidth: 2, //圆点的边框宽度
                    borderColor: 'skyblue', //圆点的边框颜色
                    lineStyle: { width: 2 }, //折线的宽度
                    shadowBlur: 1,
                    shadowColor: 'skyblue'
                }
            }
        },

    ]
})


var data = Mock.mock({
    "list|5":[
        {
            "email":"@email",
            "name":"@cname",
            "phone|13000000000-19999999999":1,
            "ingroup|+1":["编辑组","开发组",'测试组'],
            "isadmin|1":true,
            "status|1":true,
            
        }
    ]
})



render( data.list )

//渲染表格数据
function render( data ){
    var str = data.map((item,index)=>{
        return `<tr>
                    <td>${1}</td>
                    <td>23534536</td>
                    <td>黑色休闲裤</td>
                    <td>2019-05-01</td>
                    <td>完成</td>
                    <td>---------</td>
                </tr>`
    }).join('')
    document.querySelector('tbody').innerHTML = str;
}
